<template>
    <uni-popup ref="pop" type="bottom" :is-mask-click='false' :safe-area='false'>
        <view class="box c-flex_column">
            <view class="header c-flex_row c-align_center">
                <view class="title c-flex_1">
                    {{lesson.name}}
                </view>
                <view class="button-box c-flex_row c-align_center c-justify_end" @click="tapMask">
                    <uni-icons type="clear" color="#ff2525" size="20"></uni-icons>
                </view>
            </view>
            <scroll-view class="list" scroll-y :refresher-enabled='true' :refresher-threshold='100' :enable-flex='true'
                :refresher-triggered='refreshTrigger' @refresherrefresh='onRefreshing' @scrolltolower='pageLoadMoreFn'>
                <view class="list-content c-flex_column">
                    <template v-if='showPageEmpty'>
                        <c-empty type="base"></c-empty>
                    </template>
                    <template v-else>
                        <view class="unit-item" v-for='(item, index) in pageData' :key='item.id'>
                            <unit-item :unit='item' @tapItem='tapItem'></unit-item>
                        </view>
                        <uni-load-more :status="loadMoreStatusValue" :contentText="loadMoreBarContentText"
                            iconType="snow"></uni-load-more>
                    </template>
                </view>
            </scroll-view>
        </view>
    </uni-popup>
</template>

<script>
    import {
        getLessonUnitList
    } from "../services/index.js"
    import PageQueryMixin from "../../../common/mixins/page-query-mixin.js";
    import {
        gotoUnitDetailPage
    } from "../../../common/services/pageRoute.js";
    import UnitItemModel from "../models/unitItemModel.js";
    import unitItem from "./unit-item.vue"
    import {
        checkAll
    } from "../../../common/services/index.js"
    export default {
        components: {
            unitItem
        },
        mixins: [PageQueryMixin],
        data: function() {
            return {
                lesson: null,
                showPop: false,
                refreshTrigger: false,
                _refreshing: false
            }
        },
        watch: {
            showPop: function(n, o) {
                if (n == o) return;
                this.$emit("show", n);
                if (n) {
                    this.open();
                } else {
                    this.close();
                }
            },
            refreshTrigger: function(n) {
                if (n) {
                    this.pageRefreshFn();
                }
            }
        },
        methods: {
            show(show, lesson) {
                this.showPop = show;
                if (show) {
                    if (!lesson) {
                        throw new Error("show UnitListPop must have lesson data");
                    } else {
                        if (!this.lesson || lesson.id != this.lesson.id) {
                            this.lesson = lesson;
                            this._refreshing = false;
                            setTimeout(() => {
                                this.refreshTrigger = true;
                            }, 300)
                        }
                    }
                }
            },
            open() {
                this.$nextTick(() => {
                    this.$refs.pop.open();
                })
            },
            close() {
                this.$refs.pop.close();
            },
            tapMask() {
                this.show(false, null);
            },
            overLoadPageRequest(pageNo, pageSize) {
                return getLessonUnitList(pageNo, pageSize, this.lesson.id)
            },
            overLoadPageRequestSuccess(res) {
                this.pageTotalCount = res.total;
                let data = res.records.map((item, index) => {
                    return new UnitItemModel({
                        ...item,
                        index: this.pageData.length + index,
                        lessonIndex: this.lesson.index,
                        memberFlag: this.lesson.memberFlag
                    })
                })
                this.pageData = [...this.pageData, ...data];
            },
            overLoadPageRequestFinally(res) {
                setTimeout(() => {
                    this.refreshTrigger = false;
                    this._refreshing = false;
                }, 300)
            },
            onRefreshing() {
                if (this._refreshing) return;
                this._refreshing = true;
                if (!this.refreshTrigger) {
                    this.refreshTrigger = true;
                }
            },
            tapItem(item) {
                checkAll(item.promise).then(() => {
                    gotoUnitDetailPage(item.id);
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .box {
        height: 70vh;
        background: #fff;
        border-top-left-radius: 10rpx;
        border-top-right-radius: 10rpx;

        .header {
            padding: 0 20rpx;
            height: 80rpx;

            .title {
                font-size: 30rpx;
                font-weight: 700;
                color: #333;
            }

            .button-box {
                width: 100rpx;
                height: 100%
            }
        }

        .list {
            height: calc(100% - 60rpx);

            .list-content {
                padding: 15rpx;

                .unit-item {
                    margin: 30rpx 20rpx;
                    margin-bottom: 0;
                }

                .unit-item:last-child {
                    margin-bottom: 30rpx;
                }
            }
        }
    }
</style>